<template>
    <div class="supplier-list">
      <div class="page-header">
        <h1>供应商管理</h1>
        <div class="header-actions">
          <el-button type="primary" @click="handleAdd">
            <el-icon><Plus /></el-icon>
            新增供应商
          </el-button>
        </div>
      </div>
  
      <!-- 搜索区域 -->
      <el-card class="search-card">
        <el-form :model="searchForm" inline>
          <el-form-item label="供应商名称">
            <el-input 
              v-model="searchForm.name" 
              placeholder="请输入供应商名称"
              clearable
            />
          </el-form-item>
          <el-form-item label="联系人">
            <el-input 
              v-model="searchForm.contact" 
              placeholder="请输入联系人"
              clearable
            />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
              <el-option label="合作中" value="active" />
              <el-option label="已停止" value="inactive" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
  
      <!-- 供应商表格 -->
      <el-card>
        <el-table 
          :data="supplierList" 
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column prop="id" label="供应商ID" width="100" />
          <el-table-column prop="name" label="供应商名称" min-width="150" />
          <el-table-column prop="contact" label="联系人" width="100" />
          <el-table-column prop="phone" label="联系电话" width="120" />
          <el-table-column prop="email" label="邮箱" width="150" />
          <el-table-column prop="address" label="地址" min-width="200" />
          <el-table-column prop="status" label="状态" width="80">
            <template #default="scope">
              <el-tag :type="scope.row.status === 'active' ? 'success' : 'danger'">
                {{ scope.row.status === 'active' ? '合作中' : '已停止' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="120" />
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="scope">
              <div class="action-buttons">
                <el-button size="small" @click="handleView(scope.row)">查看</el-button>
                <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
  
        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="pagination.current"
            v-model:page-size="pagination.size"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>
  </template>
  
  <script>
  import { defineComponent, ref, reactive, onMounted, nextTick } from 'vue'
  import { useRouter } from 'vue-router'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { Plus, Search } from '@element-plus/icons-vue'
  
  export default defineComponent({
    name: 'SupplierList',
    components: {
      Plus,
      Search
    },
    setup() {
      const router = useRouter()
      const loading = ref(false)
      
      // 搜索表单
      const searchForm = reactive({
        name: '',
        contact: '',
        status: ''
      })
      
      // 分页信息
      const pagination = reactive({
        current: 1,
        size: 10,
        total: 0
      })
      
      // 供应商列表
      const supplierList = ref([
        {
          id: 'S001',
          name: '绿色农场',
          contact: '张三',
          phone: '13800138001',
          email: 'zhangsan@farm.com',
          address: '北京市昌平区农业园区',
          status: 'active',
          createTime: '2024-01-15'
        },
        {
          id: 'S002',
          name: '乳业公司',
          contact: '李四',
          phone: '13800138002',
          email: 'lisi@dairy.com',
          address: '河北省石家庄市工业园区',
          status: 'active',
          createTime: '2024-01-14'
        },
        {
          id: 'S003',
          name: '面包坊',
          contact: '王五',
          phone: '13800138003',
          email: 'wangwu@bakery.com',
          address: '天津市和平区商业街',
          status: 'active',
          createTime: '2024-01-13'
        },
        {
          id: 'S004',
          name: '饮料厂',
          contact: '赵六',
          phone: '13800138004',
          email: 'zhaoliu@beverage.com',
          address: '山东省济南市高新区',
          status: 'active',
          createTime: '2024-01-12'
        },
        {
          id: 'S005',
          name: '日化厂',
          contact: '钱七',
          phone: '13800138005',
          email: 'qianqi@chemical.com',
          address: '广东省深圳市南山区',
          status: 'inactive',
          createTime: '2024-01-11'
        }
      ])
      
      // 搜索
      const handleSearch = () => {
        loading.value = true
        // 重置到第一页
        pagination.current = 1
        
        setTimeout(() => {
          try {
            console.log('正在搜索供应商数据...')
            console.log(`搜索完成，共 ${supplierList.value.length} 条数据`)
            ElMessage.success('搜索完成')
            loading.value = false
          } catch (error) {
            console.error('搜索失败:', error)
            ElMessage.error('搜索失败')
            loading.value = false
          }
        }, 500)
      }
      
      // 重置搜索
      const handleReset = () => {
        Object.keys(searchForm).forEach(key => {
          searchForm[key] = ''
        })
        handleSearch()
      }
      
      // 新增供应商
      const handleAdd = () => {
        router.push('/suppliers/create')
      }
      
      // 查看详情
      const handleView = (row) => {
        router.push(`/suppliers/detail/${row.id}`)
      }
      
      // 编辑供应商
      const handleEdit = (row) => {
        router.push(`/suppliers/edit/${row.id}`)
      }
      
      // 删除供应商
      const handleDelete = (row) => {
        ElMessageBox.confirm(
          `确定要删除供应商 "${row.name}" 吗？`,
          '警告',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          ElMessage.success('删除成功')
        }).catch(() => {
          ElMessage.info('已取消删除')
        })
      }
      
      // 分页大小变化
      const handleSizeChange = (size) => {
        pagination.size = size
        loadData()
      }
      
      // 当前页变化
      const handleCurrentChange = (page) => {
        pagination.current = page
        loadData()
      }
      
      // 加载数据
      const loadData = async () => {
        loading.value = true
        
        try {
          await new Promise(resolve => setTimeout(resolve, 1000))
          console.log('正在加载供应商数据...')
          console.log(`加载完成，共 ${supplierList.value.length} 条数据`)
          
          pagination.total = supplierList.value.length
          await nextTick()
        } catch (err) {
          console.error('数据加载失败:', err)
          ElMessage.error('数据加载失败')
        } finally {
          loading.value = false
        }
      }
      
      onMounted(() => {
        loadData()
      })
      
      return {
        loading,
        searchForm,
        pagination,
        supplierList,
        handleSearch,
        handleReset,
        handleAdd,
        handleView,
        handleEdit,
        handleDelete,
        handleSizeChange,
        handleCurrentChange
      }
    }
  })
  </script>
  
  <style lang="scss" scoped>
  .supplier-list {
    padding: 20px;
  }
  
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    h1 {
      margin: 0;
      font-size: 24px;
      color: var(--text-color-primary);
    }
    
    .header-actions {
      display: flex;
      gap: 12px;
    }
  }
  
  .search-card {
    margin-bottom: 20px;
  }
  
  .pagination-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
  
  .action-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    
    .el-button {
      flex-shrink: 0;
      white-space: nowrap;
    }
  }
  
  @media (max-width: 768px) {
    .page-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
    }
    
    .header-actions {
      width: 100%;
      justify-content: flex-start;
    }
  }
  </style> 